.navbar{
    display: flex;  /*保证左右两个导航分栏可以横向排列 */
}

/*左侧导航栏部分*/
.navbar-left{
    background-color: #4ab8e7;  /*背景颜色*/
    display: flex;  /* 子元素横向排列 */
    align-items: center; /* 使子元素(link区域)垂直居中 */
}
.home-link {
    text-decoration: none;  /* 去除a标签中文字的下划线 */
}
.home-icon {
    vertical-align: sub;    /* 使Logo图标居中 */
}
.home-span {
    color: white; /* 文字颜色为白色 */
}

/*右侧导航栏部分*/
.navbar-right{
    background-color: #4cbefa;  /*背景颜色*/
    display: flex;  /* 子元素横向排列 */
    align-items: center; /* 使子元素(link区域)垂直居中 */
    justify-content: space-between; /* 水平方向上均匀分布 */
}

.navbar-search{
    /*使得navbar-search-input垂直居中*/
    display: flex;
    align-items: center;
    /*背景颜色*/
    background-color: #f0f0f0;
}
.navbar-search-input {
    border: 0;                 /* 取消未聚焦时的外边框 */
    background-color: #ffffff; /* 白色 */
    position: relative;        /*将 .header-search-input 设置为相对定位的父容器*/
}
.navbar-search-input:hover {
    background-color: #ebebeb; /* 灰色 */
}
.navbar-search-input:focus {
    outline: none;             /* 取消聚焦时的外边框 */
    background-color: #ffffff; /* 白色 */
}
.navbar-search-input::placeholder {
    /*结合父元素position: relative，对placeholder绝对定位实现垂直居中*/
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.navbar-search-icon {
    vertical-align: sub;    /* 使Logo图标居中 */
}

.navbar-link-container {
    display: flex;
}
.navbar-link {
    text-decoration: none;  /* 去除a标签中文字的下划线 */
    display: block; /* 将链接显示为块级元素,以便设置长和高 */
}
.navbar-link:hover {
    background-color: #3d96c0;  /*背景颜色*/
}
.navbar-icon {
    vertical-align: sub;    /* 使Logo图标居中 */
}
